<!--
* @description 参数1
* @fileName 03.绑定表单
* @author userName
* @date 2024-01-22 10:14:51
* @version V1.0.0
!-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>03.绑定表单</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
</head>

<body>
    <!-- oninput="handlerInput(this)" -->
    <input type="text" onchange="handlerChange(this)">
    <script>
        function handlerInput(obj) {
             console.log(obj.value);
        }
        function handlerChange(obj) {
             console.log(obj.value);
        }
    </script>
    <div id="app">
        <input type="text" :value="msg" @change="handelrDataChange">
        <hr>
        {{msg}}
        <hr>
        <input type="text" v-model="msg2">
        <hr>
        {{msg2}}
        <hr>
        <!-- 
            number: 输入是一个数字  可以是整数 小数  负数
            lazy: 表示 onchange 事件
            trim: 去掉两端空格

            input表单中 
               onchange：失去焦点后 才会触发
               oninput: 时时监听表单中数据的变化
            v-model 中默认使用的是 oninput的事件
         -->
        <input type="text" v-model.number.lazy="a"> +
        <input type="text" v-model.number="b"> = {{a+b}}
        <hr>
        <input type="text" v-model.trim="value">

    </div>

    <script>
        /*
         v-model: 双向绑定的指令   该指令只能用于表单元素上 取代vlaue的双向绑定的
        */
        var vm = new Vue({
            data:{
                msg:"hello",
                msg2:"hello",
                a:"",
                b:"",
                value:""
            },
            methods:{
                handelrDataChange(e) {
                    // 1 获取最新的值 
                    const value =e.target.value;
                    // 2 修饰时msg
                    this.msg = value
                }
            }
        });
        vm.$mount("#app")
    </script>
</body>

</html>